<template>
  <view class="list-container">
    <!-- 标题 -->
    <view class="header">
      <uni-section title="积分明细" type="line" color="#"></uni-section>
    </view>
    <!-- 明细列表 -->
    <view class="list">
      <view class="item" v-for="item in list" :key="item.id">
        <view class="left">
          <text class="title">{{ item.pointDesc }}</text>
          <text class="time">{{ getTime(item.pointTime) }}</text>
        </view>
        <view class="right" :class="{ add: item.pointChange > 0, sub: item.pointChange < 0 }">
          <text>{{ item.pointChange > 0 ? '+' + item.pointChange : item.pointChange }}积分</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array
    }
  },
  data () {
    return {};
  },
  methods: {
    getTime (time) {
      const arr = time?.toString().split('T')
      return arr?.[0] + " " + arr?.[1]
    }
  }
};
</script>

<style lang="scss" scoped>
.list-container {
  .header {
    border-bottom: 1rpx solid #c8c8c8;
  }

  .list {
    width: 100%;
    background-color: #fff;

    .item {
      box-sizing: border-box;
      padding: 30rpx 20rpx;
      display: flex;
      justify-content: space-between;

      &:not(:last-child) {
        border-bottom: 2rpx solid #f5f5f5;
      }

      .left {
        display: flex;
        flex-direction: column;
        font-size: 28rpx;
        color: dimgray;
        $h: 45rpx;

        .title {
          height: $h;
          line-height: $h;
        }

        .time {
          font-size: 24rpx;
          height: $h;
          line-height: $h;
        }
      }

      .right {
        align-self: center;

        &.add {
          color: #00ff00;
        }

        &.sub {
          color: #ff0000;
        }
      }
    }
  }
}
</style>
